<template>
  <BasicModal v-bind="$attrs" @register="registerModal" destroyOnClose title="代码在线预览：" :width="1800" :defaultFullscreen="true">
    <div class="flex">
      <BasicTree ref="treeRef" class="w-1/3" :treeData="treeData" @select="handleTreeSelected" />
      <div class="w-2/3">
        <JCodeEditor v-model:value="codeDetail" mode="js" />
      </div>
    </div>
    <template #footer>
      <a-button @click="closeModal111">关闭</a-button>
    </template>
  </BasicModal>
</template>

<script lang="ts" setup>
import { ref, computed, unref, nextTick } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { getCode, getTableInfo, getCodeView, getCodeViewText, getCodeViewFilePathTree } from '../genApi';
import { BasicTree, TreeItem, TreeActionType } from '/@/components/Tree';
import { JCodeEditor } from '/@/components/Form';
import { useMessage } from '/@/hooks/web/useMessage'; // 轻提醒
const { createMessage: $message } = useMessage(); // 解构

// Emits声明
const emit = defineEmits(['register', 'success']);
const treeRef = ref<Nullable<TreeActionType>>(null);
const codeDetail = ref('');
const treeData = ref([]);
//弹框初始化
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
  console.log('数据为444444444：', data);
  treeData.value = await getCodeViewFilePathTree({ tableId: data?.tableId });
  nextTick(() => {
    //默认展开第一级
    unref(treeRef)?.filterByLevel(7);
  });
  // codeDetail.value = '11111111';
});


/**
 * 点击树节点,筛选出对应的用户
 */
async function handleTreeSelected(keys, { selectedNodes }) {
  if (keys[0] != null && selectedNodes[0].isLeaf) {
    let path = keys[0];
    codeDetail.value = await getCodeViewText({ path: path });
  } else {
    codeDetail.value = ''
  }
}

/**
 * 实体类点击事件
 */
function closeModal111() {
  //关闭弹窗
  closeModal();
  //刷新列表
  emit('success', {});
}


//表单提交事件
async function handleSubmit(v) {
  try {
    setModalProps({ confirmLoading: true });
    //提交表单
    let filePathList = await getCode({});
    //关闭弹窗
    closeModal();
    //刷新列表
    emit('success', {});
  } catch ({ errorFields }) {
    if (errorFields) {
      const firstField = errorFields[0];
      if (firstField) {
        scrollToField(firstField.name, { behavior: 'smooth', block: 'center' });
      }
    }
    return Promise.reject(errorFields);
  } finally {
    setModalProps({ confirmLoading: false });
  }
}
</script>

<style lang="less" scoped>
/** 时间和数字输入框样式 */
:deep(.ant-input-number) {
  width: 100%;
}

:deep(.ant-calendar-picker) {
  width: 100%;
}
</style>